<!-- 重新认证（裕华区内、非裕华区） -->
<template>
  <div>
    <ContainerTitle text="企业基本信息-重新认证"></ContainerTitle>
    <!-- <div class="titleDiv">
      <div>企业基本信息-重新认证</div>
    </div> -->
    <div class="msgDiv">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="经办人姓名:" prop="handlerName">
          <el-input v-model="ruleForm.handlerName" placeholder="请输入经办人姓名" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件类型:" class="Document" prop="handlerCertificatesType">
          <el-select v-model="ruleForm.handlerCertificatesType" placeholder="请选择证件类型">
            <el-option
              v-for="item in DocumentType"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码:" prop="handlerCertificatesNumber">
          <el-input v-model="ruleForm.handlerCertificatesNumber" placeholder="请输入证件号码" maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="经办人性别:" prop="handlerSex" class="Gender" style="display: flex;">
          <el-radio-group v-model="ruleForm.handlerSex" style="margin-left: 0px;">
            <el-radio
              v-for="item in sys_user_sex"
              :key="item.dictLabel"
              :label="item.dictValue"
            >{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号:" prop="handlerPhone">
          <el-input v-model="ruleForm.handlerPhone" placeholder="请输入手机号" maxlength="11" @input="ruleForm.handlerPhone = ruleForm.handlerPhone.replace(/[^0-9]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="验证码:" class="Verification" prop="Verification_Code">
          <el-input v-model="ruleForm.Verification_Code" placeholder="请输入验证码"></el-input>
          <div class="Verification_Code">
            <img class="captchaImg" :src="captchaImage" @click="getCaptchaImage" />
          </div>
        </el-form-item>
        <el-form-item label="短信验证码:" class="Verification" prop="SMS_verification_Code">
          <el-input v-model="ruleForm.SMS_verification_Code" maxlength="6" placeholder="请输入短信验证码"></el-input>
          <el-button
            @click="sendAuthCode"
            v-show="textCount < 0"
            class="Verification_Code"
          >发送验证码</el-button>
          <div
            class="Verification_Code"
            v-show="textCount >= 0"
          >{{'已发送(' + (textCount < 10 ? ('0' + textCount) : textCount) + '秒)'}}</div>
        </el-form-item>
        <div class="legal_person">法人单位信息比对</div>
        <el-form-item label="企业名称：" class="Enterprise" prop="companyName">
          <el-input v-model="ruleForm.companyName" placeholder="请输入企业名称" maxlength="50"></el-input>
          <div class="Completely">(企业名称需和证件单位名称完全一致)</div>
        </el-form-item>
        <el-form-item label="统一社会信用代码：" class="certificates" prop="companyCode">
          <el-input v-model="ruleForm.companyCode" placeholder="请输入统一社会信用代码" maxlength="18" @input="ruleForm.companyCode = ruleForm.companyCode.replace(/[^\w]/g,'')"></el-input>
          <div class="Completely">(请填写正确的18位统一社会信用代码)</div>
        </el-form-item>
        <el-form-item label="上传证明文件：" class="upload" prop="companyCertificateFile">
          <div style="width: 640px">
            <finalUpload
              @changeImgUp="upLoadImg"
              :fileLists="supporting"
              :limit="1"
              ref="imgLists"
              tip="  "
            ></finalUpload>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="needing">
            <div>注意事项：</div>
            <div>1、请上传含有18位统一社会信用代码号的登记证件，如：营业执照、统一社会信用代码证书、民办非企业单位登 记证书、律师事务所执业许可证、社会服务机构登记证书、事业单位法人登记证书、社会团体法人登记证书、工会 法人资格证书、宗教活动场所登记证、基金会法人登记证书、农村集体经济组织登记证。</div>
            <div>2、证件需有效且原件或扫描件或加盖公章的复印件上传（套拍无效）。</div>
            <div>3、照片支持.jpg、.jpeg 格式，大小不超过1M。</div>
          </div>
        </el-form-item>
        <div class="legal_person">法定代表人或负责人信息比对</div>
        <el-form-item label="法定代表人或负责人姓名：" class="lengthen" prop="companyPerson">
          <el-input v-model="ruleForm.companyPerson" placeholder="请输入法定代表人或负责人姓名" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件类型：" class="Document" prop="companyCertificatesType">
          <el-select v-model="ruleForm.companyCertificatesType" placeholder="请选择证件类型">
            <el-option
              v-for="item in DocumentType"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码：" prop="companyCertificatesNumber">
          <el-input v-model="ruleForm.companyCertificatesNumber" placeholder="请输入证件号码" maxlength="30" @input="ruleForm.companyCertificatesNumber = ruleForm.companyCertificatesNumber.replace(/[^\w]/g,'')"></el-input>
        </el-form-item>
        <div class="modify">
          <el-form-item label="上传身份证件：" class="upload" prop="companyCertificatesFile">
            <!-- <div style="width: 640px;display: flex;"> -->
            <finalUpload
              @changeImgUp="upLoadImgPositive"
              :fileLists="Upload_IDFront"
              :limit="1"
              ref="imgLists"
              name="上传（正面）"
              tip="  "
              :size="0.5"
            ></finalUpload>
            <!-- </div> -->
          </el-form-item>
          <el-form-item class="ficatesFile" prop="companyCertificatesBackFile">
            <finalUpload
              @changeImgUp="upLoadImgBack"
              :fileLists="Upload_ID_Back"
              :limit="1"
              ref="imgLists"
              name="上传（背面）"
              tip="  "
              :size="0.5"
            ></finalUpload>
          </el-form-item>
        </div>
        <el-form-item>
          <div class="needing">
            <div>注意事项：</div>
            <div>1、证件需有效且原件或扫描件或加盖公章的复印件上传（套拍无效）。</div>
            <div>2、照片所有信息需清晰可见，内容真实有效，不得做任何修改。</div>
            <div>3、照片支持.jpg、.jpeg格式，大小不超过500K。</div>
          </div>
        </el-form-item>
        <el-form-item style="display: flex;">
          <Buttons :buttons="buttons" @resetForm="resetForm" @submitForm="submitForm"></Buttons>
          <!-- <el-button class="cancel" @click="resetForm('ruleForm')">取消</el-button>
          <el-button class="Submit" @click="submitForm('ruleForm')">提交</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import finalUpload from '@/components/finalUpload'
import { isPhone } from '@/utils/util.js'

import { mapActions } from 'vuex'

import recerHuaqu from '@/formRules/userAccount/recerHuaqu.js'

import { getCaptchaImage, getFileList, getAuthCode, verifyAuthCode } from '@/common/api.js'
import { getClueInfo, againAuthentication } from '@/common/api/company.js'

export default {
  components: { finalUpload },
  mixins: [recerHuaqu],
  data() {
    return {
      buttons: [
        { text: "取消", type: "normal", size: "l", method: "resetForm" },
        { text: "提交", type: "success", size: "l", method: "submitForm" }
      ],
      companyUser: {
        userPhone: '', //
        uuid: '', //
        imgCode: '', //图片验证码
        authType: '', //短信类型
        authCode: '', //验证码
      },
      imgList: [],
      DocumentType: [],
      sys_user_sex: [],
      companyInfo: '', //
      login: '', //
      captchaImage: '',
      realCode: '',
      textCount: -1, //短信倒计时
      supporting: [], //上传证明文件
      Upload_IDFront: [], //上传身份证件(正面)
      Upload_ID_Back: [] //上传身份证件(背面)
    }
  },
  methods: {
    ...mapActions(['reGetCompanyInfo']),
    /**
     * 获取图片验证码
     */
    async getCaptchaImage() {
      let res = await getCaptchaImage()
      this.captchaImage = "data:image/gif;base64," + res.img;
      this.loginPwMsg.uuid = res.uuid;
    },
    //上传证明文件
    upLoadImg(val) {
      this.ruleForm.companyCertificateFile = val.map(el => el.batchId).join(',')
    },
    //上传身份证件(正面)
    upLoadImgPositive(val) {
      this.ruleForm.companyCertificatesFile = val.map(el => el.batchId).join(',')
    },
    //上传身份证件(背面)
    upLoadImgBack(val) {
      this.ruleForm.companyCertificatesBackFile = val.map(el => el.batchId).join(',')
    },
    //取消
    resetForm(ruleForm) {
      this.$router.replace({ path: '/company/enterprise' })
      this.$refs[ruleForm].resetFields()
    },
    //提交
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          // 验证手机验证码
          verifyAuthCode({
            userPhone: this.ruleForm.handlerPhone,
            authCode: this.ruleForm.SMS_verification_Code,
            authType: 'register'
          }).then(res => {
            if(res.code == 200) {
              this.postForm()
            } else {
              this.$message.error('验证码错误')
            }
          })
        }
      })
    },
    async postForm(){
      let data = {
        clueType: this.companyInfo.clueType,
        clueSource: this.companyInfo.clueSource,
        attractInvestmentClueExpand: this.ruleForm
      }
      let res = await againAuthentication(data)
      // let api = `${host}/company/againAuthentication`
      // let res = await request(this, api, data, 'POST')
      if (res.code == 200) {
        this.reGetCompanyInfo()
        this.$router.replace({ path: '/company/enterprise' })
      }
    },
    /**
     * 发送短信验证码
     */
    async sendAuthCode() {
      let ns = this
      if (!isPhone(ns.ruleForm.handlerPhone)) {
        ns.$message.error('号码格式不正确')
        return
      }
      let data = {
        userPhone: ns.ruleForm.handlerPhone,
        authType: 'other',
      }
      let res = await getAuthCode(data)
      if (res.code == 200) {
        ns.textCount = 120
        var timer = setInterval(counting, 1000)
        function counting() {
          ns.textCount--
          if (ns.textCount < 0) {
            clearInterval(timer)
          }
        }
      } else if (res.code == 204) {
        ns.$confirm(res.msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            ns.$router.push({ path: 'forgotPassword' })
          })
          .catch(() => {
            ns.$message({
              type: 'info',
              message: '已取消操作',
            })
          })
      } else {
        ns.$message.error(res.msg)
      }
      // request(ns, config.api.companySendAuthCode, data, 'POST').then((res) => {})
    },
    async getFormOptions() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`sys_user_sex,legal_representative_type`).then(res => {
        this.DocumentType = res.legal_representative_type
        this.sys_user_sex = res.sys_user_sex
      })
    },
    async _Reverse() {
      let data = {
        clueId: this.login.clueId
      }
      // let api = `${host}/company/profile/getClueInfo`
      // let res = await request(this, api, data, 'get')
      let res = await getClueInfo(data)
      this.ruleForm = res.data
      // 身份证背面
      if (res.data.companyCertificatesBackFile != '') {
        this.Picture_dynamics(res.data.companyCertificatesBackFile, this.Upload_ID_Back)
      }
      //身份证正面
      if (res.data.companyCertificatesFile != '') {
        this.Picture_dynamics(res.data.companyCertificatesFile, this.Upload_IDFront)
      }
      //经办人证件文件
      if (res.data.companyCertificateFile != '') {
        this.Picture_dynamics(res.data.companyCertificateFile, this.supporting)
      }
    },
    async Picture_dynamics(dynamics, arr) {
      let res = await getFileList({
        batchId: dynamics
      })
      // let api = `${host}/system/file/list?batchId=${dynamics}`
      // let res = await request(this, api, {}, 'GET')
      res.rows.forEach(item => {
        let fileList = {
          name: item.fileName,
          filePath: item.filePath
        }
        arr.push(fileList)
      })
    },
  },
  created() {
    this.login = JSON.parse(localStorage.getItem('login'))
    this.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
    this.getFormOptions()
    this._Reverse()
    this.getCaptchaImage()
  }
}
</script>
<style lang="scss" scoped>
.cancel {
  width: 120px;
  height: 40px;
  background: #f1f2f4;
  border-radius: 3px;
  color: #045db9;
}
.Submit {
  width: 120px;
  height: 40px;
  background: #045db9;
  border-radius: 3px;
  color: #ffffff;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.msgDiv {
  margin: 40px 0;
}
.Gender {
  ::v-deep .el-form-item__content {
    margin-left: 0px !important;
  }
}
::v-deep .el-input__inner {
  width: 550px;
  display: flex;
}
.Document {
  ::v-deep .el-form-item__content {
    display: flex;
  }
}
.Verification {
  .Verification_Code {
    width: 128px;
    height: 40px;
    background: #f1f2f4;
    border: 1px solid #eeeeee;
    border-radius: 3px;
    color: #045db9;
    .captchaImg {
      width: 128px;
      height: 40px;
    }
  }
  ::v-deep .el-form-item__content {
    display: flex;
  }
  ::v-deep .el-input {
    width: 565px;
  }
}
.legal_person {
  width: 100%;
  height: 40px;
  background: #f1f2f4;
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  padding-left: 20px;
  margin-bottom: 35px;
}
.certificates {
  position: relative;
  right: 50px;
  width: 1000px;
  ::v-deep .el-form-item__content {
    margin-left: 0px !important;
    display: flex;
  }
  ::v-deep .el-form-item__label {
    width: 150px !important;
  }
}
.lengthen {
  display: flex;
  position: relative;
  right: 85px;
  ::v-deep .el-form-item__content {
    margin-left: 0px !important;
  }
  ::v-deep .el-form-item__label {
    width: 185px !important;
    padding: 0 7px 0 0;
  }
}
.Enterprise {
  display: flex;
  ::v-deep .el-form-item__label {
    position: absolute;
  }
  ::v-deep .el-form-item__content {
    display: flex;
  }
  ::v-deep .el-input {
    width: 565px !important;
  }
}
.Completely {
  display: flex;
  width: 425px;
  color: #bbbbbb;
  // font-size: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
}
.upload {
  position: relative;
  right: 20px;
  ::v-deep .el-form-item__label {
    width: 120px !important;
  }
}
.modify {
  display: flex;
  .ficatesFile {
    ::v-deep .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}
.needing {
  text-align: initial;
  color: #bbbbbb;
  line-height: 25px;
  font-weight: 400;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>